<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo{
				width: 200px;
				height: 200px;
				background-color: pink;
				border-radius: 50%;
				text-align: center;
				line-height: 200px;
				transition: all .5s;
			}
		</style>
	</head>
	<body>

		<!-- 
		 1、页面中的事件：页面中的一些行为（场景）： 点击 、 鼠标移动、滚动条、  加载事件
			鼠标相关： 点击 鼠标移动 
			键盘相关： 普通标签添加键盘的代码，永远不可能执行。普通标签不会发生键盘事件。  表单标签
			表单事件：只能给表单标签用
			其他事件： 页面加载、滚动条滚动
		 
		 2、异步事件 ： 代码会跳过  
			同步代码：读一句，执行一句....读一句，执行一句
			异步代码：读一句，不等着执行，读下一句
			
		 3、一个事件，可以对应多个操作（函数） ，暂时我们学习的代码，只能加一个。
		 
		 4、如果给标签添加事件
			一个事件的代码有三要素
				- 事件目标 ：给谁加
				- 事件类型： 那种事件
				- 事件处理程序（函数） ：事件发生之后，要执行的代码
				
		5、鼠标事件：鼠标事件是页面标签的通用事件，所有标签都可以使用。
		 -->
		 <div class="demo">我胖了</div>
		 <button class="btn1">变瘦</button>
		 <button class="btn2">变胖</button>
		 <script>
			 // 获取标签
			 var demo = document.querySelector(".demo")
			 var btn1 = document.querySelector(".btn1")
			 var btn2 = document.querySelector(".btn2")
			 
			 // 给按钮添加点击事件 ： 变瘦
			 // 点击之后，修改div 的内容和样式
			 btn1.onclick = function(){
				 demo.innerHTML = "我瘦了"
				 demo.style.borderRadius = 0
				 demo.style.width = "50px"
			 }
			 // 给按钮添加点击事件 ： 变胖
			 // 点击之后，修改div 的内容和样式
			 btn2.onclick = function(){
				 demo.innerHTML = "我胖了"
				 demo.style.borderRadius = "50%"
				 demo.style.width = "200px"
				 demo.style.backgroundColor = "#ffff00"
			 }
		 </script>
		 
	</body>
</html>
